<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>  

<script type="text/javascript">
	$(function(){
		var idConfirm = 0;
		var searchClick = 0;
		
		$('#confirmId').click(function(){
			var id = $('#id').val();
			if(id == ''){
				$('#id_signed').html('ID는 필수 항목입니다.').css('color','red');
				$('#id').focus();
				return; //submit이 아니기 때문에 함수만 빠져나옴(기본 객체 제거할 필요 없음)
			}
			
			//아이디 유효성 검사 (영문소문자, 숫자만 허용),공백 사용하지 않기
			for (var i=0; i<id.length ;i++){
				var ch = id.charAt(i);
				if (!(ch>='0' && ch<='9') && !(ch>='a' && ch<='z') || id.indexOf(' ') >= 0){
					$('#id_signed').html('아이디는 소문자, 숫자만 입력가능합니다.(공백 불가)').css('color','red');
					id.focus();
					return;
				}
			}
			
			//서버에서 데이터 전달하고 결과 데이터 요청
			$.getJSON('idCheck.do',{id:id},function(data){
				if(data.result == 'double'){ //id중복
					idConfirm = 0;
					$('#id_signed').html('이미 등록된 아이디입니다.').css('color','red');
					$('#id').val('').focus();
				}else if(data.result == 'useid'){  //id 사용가능
					idConfirm = 1; //중복확인 작업 수행하면 count를 1로 변경
					$('#id_signed').html('사용 가능한 아이디입니다.').css('color','black');
					$('#id').attr("readonly",true); //사용가능한 아이디일 경우 수정불가능
				}else{
					alert('서버 오류');
				}
			});
		});

		//주소 찾기 팝업
		$('#searchAddr').click(function(){
			searchClick = 1;
			window.open('searchAddr.do','주소 찾기','top=200px,left=600px,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=400,height=450');
		});
		 
		//이벤트 연결
		$('#joinForm').submit(function(event){
			
			//ID 중복 체크 안 했을 경우
			if(idConfirm == 0){
				$('#id_signed').html('ID 중복 체크 필수!!').css('color','red');
				$('#id').focus();
				return false;
			}
			
			//주소찾기 안 했을 경우
			if(searchClick == 0 && $('#zipcode').val() == ''){
				$('#search_signed').html('주소 찾기 필수!!').css('color','red');
				return false;
			}
			
			//전화번호 유형 체크(숫자만 가능)
			if(isNaN($('#phone').val())){
				$('#int_signed').html('숫자만 입력해주세요.').css('color','red');
				return false;
			}
		});
	}); 
</script>

<div class="container">
<!-- 회원가입 창 -->
<div id="info">
	<h2><img src="./image/title_join.gif"/></h2>
</div>
	
	<div id="join"><br><br>
		<img src="./image/join_img2.jpg" style="margin-left:220px;"/>
	<form:form commandName="memberCommand" role="form" class="form-horizontal" 
				name="joinForm" id="joinForm" action="join.do" method="post">
		<form:errors element="div"/>
			<div class="form-group">
				<label for="id" class="col-md-3 col-xs-3 col-sm-3 control-label">아이디</label>
				<div class="col-md-3 col-xs-3 col-sm-3">
					<form:input path="id" class="form-control"/>
				</div>
				<div class="col-md-2 col-xs-2 col-sm-2">
					<button type="button" class="btn btn-default" id="confirmId">ID 중복확인</button>
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<span id="id_signed"></span>
					<font color="red"><form:errors path="id"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="col-md-3 col-xs-3 col-sm-3 control-label">비밀번호</label>
				<div id="password" class="col-md-5 col-xs-5 col-sm-5">
					<form:password path="password" class="form-control" showPassword="false"/>
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<font color="red"><form:errors path="password"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="confirmPassword" class="col-md-3 col-xs-3 col-sm-3 control-label">비밀번호확인</label>
				<div class="col-md-5 col-xs-5 col-sm-5">
					<form:password path="confirmPassword" class="form-control" showPassword="false"/>		
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<font color="red"><form:errors path="confirmPassword"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-md-3 col-xs-3 col-sm-3 control-label">이름</label>
				<div class="col-md-5 col-xs-5 col-sm-5">
					<form:input path="name" class="form-control"/>
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<font color="red"><form:errors path="name"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="phone" class="col-md-3 col-xs-3 col-sm-3 control-label">전화번호</label>
				<div class="col-md-5 col-xs-5 col-sm-5">
					<form:input path="phone" id="phone" class="form-control" maxlength="11" placeholder="-를 빼고 입력해주세요"/>
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<span id="int_signed"></span>
					<font color="red"><form:errors path="phone"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="zipcode" class="col-md-3 col-xs-3 col-sm-3 control-label">우편번호</label>
				<div class="col-md-3 col-xs-3 col-sm-3">
					<form:input path="zipcode" class="form-control" readonly="true"/>
				</div>
				<div class="col-md-2 col-xs-2 col-sm-2">
					<input type="button" class="btn btn-default" id="searchAddr" value="주소 찾기">
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<span id="search_signed"></span>
					<font color="red"><form:errors path="zipcode"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="addr1" class="col-md-3 col-xs-3 col-sm-3 control-label">주소</label>
				<div class="col-md-5 col-xs-5 col-sm-5">
					<form:input path="addr1" class="form-control" readonly="true"/>
				</div>
			</div>
			<div class="form-group">
				<label for="addr2" class="col-md-3 col-xs-3 col-sm-3 control-label">상세주소</label>
				<div class="col-md-5 col-xs-5 col-sm-5">
					<form:input path="addr2" class="form-control"/>
				</div>
				<div class="col-md-4 col-xs-4 col-sm-4">
					<font color="red"><form:errors path="addr2"/></font> <br>
				</div>
			</div>
			<div class="form-group">
				<label for="gender" class="col-md-3 col-xs-3 col-sm-3 control-label">성별</label>
				<div class="col-md-5 col-xs-5 col-sm-5">
					<form:radiobutton path="gender" value="남자" checked="true"/>남자 &nbsp;&nbsp;&nbsp;
					<form:radiobutton path="gender" value="여자" />여자
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-12 col-xs-12 col-sm-12" align="center">
					<input type="submit" class="btn btn-info" value="2단계 프로필 입력">&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="button" class="btn btn-warning" value="취소" onclick="location.href='main.do'">
				</div>
			</div>
	</form:form>
	</div>
</div>
